<template>
	<view class="content">
		<skeleton :show="showSkeleton" :isNodes="isNodes" ref="skeleton" loading="chiaroscuro" selector="skeleton"
			bgcolor="#FFF"></skeleton>
		<!-- 下拉菜单 -->
		<view class="top-menu">
			<yy-dropdown-menu ref="dropdown" active-color="#36cf89">
				<yy-dropdown-item showType="1" :options="option1" v-model="value1" @change="changeDepartment">
				</yy-dropdown-item>
				<yy-dropdown-item :options="option2" v-model="value2" @change="changeFilter"></yy-dropdown-item>
			</yy-dropdown-menu>
		</view>
		<view class="top-space"></view>
		<!-- 列表 -->
		<view class="list-box skeleton-rect" v-if="itemList.length>0">
			<view class="list-item skeleton-rect" v-for="(item,index) in itemList" @click="goDoctorHome(item)">
				<view class="item-left">
					<view class="avatar skeleton-radius">
						<image v-if="item.avatar" :src="item.avatar" mode="aspectFill"></image>
						<image v-else src="@/static/images/f.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="item-right">
					<view class="r-top-box">
						<view class="name skeleton-rect">{{item.name}}</view>
						<view v-if="item.is_expert == 1" class="expert">专家</view>
						<view class="online" v-if="item.is_online == 1">在线</view>
						
						<!-- <view class="online" :class="item.is_online != 1?'no':''">在线</view> -->
						
					</view>
					<view class="pe-box skeleton-rect">
						<!-- 职位 -->
						<view class="position">{{item.chief}}</view>
					</view>
					<!-- 科室 -->
					<view class="department skeleton-rect">{{item.department_name}}</view>
					<!-- 擅长 -->
					<view class="skilled yy-text-line yy-text-line2">擅长：{{item.good_at}}</view>
					<!-- 好评-访问 -->
					<view class="evaluate-visitor skeleton-rect">
						<view class="item">
							好评率
							<view class="nums">{{getRate(item.positive_rating)}}</view>
						</view>
						<view class="item">
							访问量
							<view class="nums">{{item.inquiry_count}}</view>
						</view>
					</view>
					<!-- 图文-咨询费-个人主页 -->
					<view class="r-bot-box skeleton-rect">
						<view class="pt-ask-box">
							<view class="item">
								<view class="i-title">在线问诊</view>
								<!-- <view class="i-price">￥{{item.money_chat}}</view> -->
							</view>
							<view class="item">
								<view class="i-title">图文问诊</view>
								<!-- <view class="i-price">￥{{item.money_pic}}</view> -->
							</view>
						</view>
						<view class="home">进入主页</view>
					</view>
				</view>
			</view>
			<view class='loadingicon acea-row row-center-wrapper' @click="clickMore">
				<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
			</view>
		</view>
		<view class="nodata" v-else>
			<emptyPage title="暂无数据～"></emptyPage>
		</view>

		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"
			:isGoIndex="false"></authorize>
		<!-- #ifndef H5 -->
		<passwordPopup></passwordPopup>
		<!-- #endif -->

	</view>

</template>

<script>
	
	// #ifndef H5
	import passwordPopup from '@/components/passwordPopup';
	// #endif
	import authorize from '@/components/Authorize';
	import {
		mapGetters
	} from 'vuex';
	import yyDropdownMenu from './components/yy-dropdown-menu/yy-dropdown-menu.vue'
	import yyDropdownItem from './components/yy-dropdown-item/yy-dropdown-item.vue'
	import emptyPage from '@/components/emptyPage.vue';
	import {
		getDepartment,
		getDoctorList
	} from '@/api/inquiry.js'
	export default {
		computed: {
			...mapGetters(['viewColor', 'isLogin','routeError']),
		},
		components: {
			yyDropdownMenu,
			yyDropdownItem,
			emptyPage,
			// #ifndef H5
			passwordPopup,
			// #endif
			authorize
		},
		data() {
			return {
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				showSkeleton: true, // 骨架屏显示隐藏
				isNodes: 0, // 控制什么时候开始抓取元素节点,只要数值改变就重新抓取
				value1: -1, // 科室id
				value2: 0,	// 排序标识
				option1: [],
				option2: [{
						text: '默认排序',
						value: 0
					},
					{
						text: '只看专家',
						value: 1
					},
					{
						text: '只看在线',
						value: 4
					},
					{
						text: '按价格从高到低排序',
						value: 2
					},
					{
						text: '按价格从低到高排序',
						value: 3
					},
				],

				loadTitle: '加载更多',
				loading: false,
				loadend: false,
				where: {
					'page': 1,
					'limit': 20
				},
				itemList: [],
			}
		},
		onLoad() {
			if(this.routeError) {
				this.$store.commit('GO_ERROR');
				return
			}
			this.getDepartment();
			this.getList();
		},
		onReady() {
			this.isNodes++;
		},
		onShow() {

		},
		onPullDownRefresh() {
			console.log('rk==>refresh')
			this.loadend = false;
			this.where.page = 1;
			this.clickMore();
		},
		onReachBottom() {
			this.clickMore();
		},
		methods: {
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			// 打开授权
			openAuto() {
				this.isAuto = true;
				this.isShowAuth = true
			},
			// 授权回调
			onLoadFun() {
				this.isShowAuth = false
			},
			getRate(val){
				if(val>1){
					return String(val) + '%';
				}
				return String(val * 100) + '%';
			},
			hiddenSkeleton() {
				setTimeout(() => {
					this.showSkeleton = false
				}, 500)
			},
			/**
			 * 科室
			 */
			getDepartment() {
				
				getDepartment().then(res=>{
					let resA = res.data;
					let newArray = [];
					resA.forEach((item,index)=>{
						let newItem = {};
						newItem.text = item.name;
						newItem.value = item.id;
						newArray.push(newItem);
					})
					this.option1 = newArray;
					//console.log('new=>'+JSON.stringify(this.option1));
				})
			},
			/**
			 * 列表
			 */
			getList() {
				uni.stopPullDownRefresh();
				let that = this;
				
				that.where.mer_id = '';
				that.where.department_id = this.value1;
				that.where.screening = this.value2;
				getDoctorList(that.where).then(res => {
					that.hiddenSkeleton();
					uni.stopPullDownRefresh();
					
					if(that.where.page == 1){
						that.itemList = [];
					}
					let resList = res.data.list;
					let allCount = res.data.count;
					that.itemList = that.$util.SplitArray(resList, that.itemList);
					that.$set(that, 'itemList', that.itemList);
					let loadend = that.itemList.length >= allCount;
					
					// console.log('rk==>[xx]'+allCount + '[xx]'+that.itemList.length+'[bool]'+loadend);
					
					that.loadend = loadend;
					that.loadTitle = loadend ? '我也是有底线的' : '加载更多';
					that.where.page += 1;
					that.loading = false;
				});
			},
			/**
			 * 更多
			 */
			clickMore() {
				if (this.loadend) {
					return
				}
				this.getList();
			},
			/**
			 * 科室
			 */
			changeDepartment(item) {
				this.value1 = item.value;
				//console.log('rk==>[科室]' + JSON.stringify(item))
				this.where.page = 1;
				this.getList();
			},
			/**
			 * 筛选
			 */
			changeFilter(item) {
				this.value2 = item.value;
				//console.log('rk==>[筛选]' + JSON.stringify(item))
				this.where.page = 1;
				this.getList();
			},
			/**
			 * 医生主页
			 */
			goDoctorHome(item) {
				
				if(!this.isLogin){
					this.openAuto();
					return
				}
				
				uni.navigateTo({
					url: '/pages/shops/subs_inquiry/doctor/index?doctor_id='+item.id,
				});
			}
		}
	}
</script>

<style lang="scss">
	.content {
		
	}
	.top-menu {
		position: fixed;
		top: 0rpx;
		width: 100%;
		height: 80rpx;
		z-index: 99;
	}
	.top-space {
		width: 100%;
		height: 80rpx;
	}
	.list-box {
		background-color: #fff;
		padding: 5rpx 30rpx 0rpx;

		.list-item {
			display: flex;
			padding: 40rpx 0 30rpx;
			border-bottom: 2rpx solid #e2e2e2;

			.item-left {
				.avatar {
					width: 110rpx;
					height: 110rpx;
					border-radius: 130rpx;
					overflow: hidden;
				}

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.item-right {
			margin-left: 20rpx;
			width: 100%;
			.r-top-box {
				display: flex;
				display-direction:row;
				align-items: center;
				
				.name {
					display:flex;
					flex-direction: row;
					font-size: $yy-title-big-font;
					font-weight: bold;
					min-width:50px;
				}
				.expert {
					margin-left: 10rpx;
					padding: 2rpx 8rpx;
					border-radius: 5rpx;
					background-color: #F6F4Ff;
					font-size: 20rpx;
					color: #735BF5;
				}
				.pe-box {
					display: flex;
					align-items: center;
			
					.position {
						font-size: 28rpx;
						padding: 0 0 0 10rpx;
					}
			
					
				}
				
				.online {
					font-size: 22rpx;
					background-color: $yy-main-col;
					color: #fff;
					padding: 2rpx 8rpx;
					border-radius: 5rpx;
					position: relative;
					margin-left:5px;
				
				}
				.no {
					background-color: #969696;
				}
			}
			
			.department {
				font-size: $yy-title-font;
				padding: 10rpx 0;
			}

			.skilled {
				font-size: 28rpx;
				color: #636363;
			}

			.evaluate-visitor {
				padding: 15rpx 0;
				display: flex;

				.item {
					display: flex;
					margin-right: 20rpx;
					font-size: 28rpx;
					color: #B8B8B8;
				}

				.nums {
					color: #323232;
					margin-left: 10rpx;
					font-weight: bold;
				}
			}

			.r-bot-box {
				display: flex;
				justify-content: space-between;

				.pt-ask-box {
					display: flex;

					.item {
						display: flex;
						align-items: center;
						margin-right: 10rpx;

						.i-title {
							display: flex;
							align-items: center;
							font-size: 22rpx;
							border-radius: 30rpx;
							padding: 2rpx 12rpx;
							margin-right: 10rpx;
							border: 2rpx solid $yy-main-col;
							color: $yy-main-col;
						}

						.i-price {}
					}
				}

				.home {
					display: flex;
					align-items: center;
					border-radius: 10rpx;
					border: 1rpx solid #EA7F5D;
					color: #EA7F5D;
					padding: 2rpx 10rpx;
					font-size: 22rpx;
				}
			}
		}
	}
</style>
